<template>
  <div class="table-page py-0 my-0">
    <a-form label-align="right" layout="inline" auto-label-width :model="listParams" size="small" class="form my-10">
      <a-form-item field="subsidyType" hide-label>
        <a-select
          v-model="listParams.subsidyType"
          placeholder="请选择类型"
          allow-clear
          :style="{ width: '200px' }"
          @change="changeCurrent(1)"
        >
          <a-option :value="1">零元购</a-option>
          <a-option :value="2">先买后返</a-option>
        </a-select>
      </a-form-item>

      <a-form-item field="title" hide-label>
        <a-input v-model="listParams.title" placeholder="请输入名称" @press-enter="changeCurrent(1)"></a-input>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" size="small" @click="changeCurrent(1)">
            <template #icon>
              <icon-search />
            </template>
            <template #default>查询</template>
          </a-button>
          <a-button size="small" @click="onResetSearch">
            <template #icon>
              <icon-sync />
            </template>
            <template #default>重置</template>
          </a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <div class="w-full flex-1 overflow-hidden">
      <a-table
        row-key="id"
        v-model:columns="columns"
        :loading="loading"
        :data="tableData"
        :selected-keys="checkedValue"
        :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
        :pagination="pagination"
        :row-selection="{ type: 'radio' }"
        @select="onSelect"
      >
      </a-table>
    </div>
  </div>
</template>

<script setup>
import { paySubsidyActivityList, linkSelect } from '@/apis'
import { usePagination } from '@/hooks'
const props = defineProps(['tabCurrentInfo', 'displayInfo'])
const emit = defineEmits(['handleCheck'])
const columns = ref([
  {
    title: 'ID',
    width: 80,
    dataIndex: 'id'
  },
  {
    title: '活动名称',
    width: 100,
    dataIndex: 'title',
    ellipsis: false,
    tooltip: true
  },
  {
    title: '活动类性',
    width: 100,
    render: (data) => {
      return data.record.subsidyType ? ['零元购', '先买后返'][data.record.subsidyType - 1] : '--'
    }
  },
  {
    title: '单用户补贴单数',
    width: 100,
    dataIndex: 'canUseNum',
    ellipsis: false,
    tooltip: true
  },
  {
    title: '创建时间',
    width: 150,
    render: (data) => {
      return data.record.createdAt || '--'
    }
  }
])

const loading = ref(false)
const tableData = ref([])
const checkedValue = ref([])
const listParams = reactive({
  page: 1,
  pageSize: 10,
  title: undefined,
  id: undefined,
  subsidyType: undefined
})
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.pageSize })

// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.pageSize = pagination.pageSize
    const res = await paySubsidyActivityList(listParams)
    tableData.value = res.data.data
    setTotal(res.data?.total ?? 0)
  } finally {
    loading.value = false
  }
}

// 表格页码改变
const changeCurrent = (e) => {
  pagination.current = listParams.page = e
  getTableData()
}

// 重置筛选查询
const onResetSearch = () => {
  listParams.title = listParams.subsidyType = undefined
  changeCurrent(1)
}

watch(
  () => props.displayInfo,
  (newValue) => {
    if (newValue.typeId == 4 && newValue.id) {
      checkedValue.value = [Number(newValue.id)]
      listParams.id = newValue.id
    } else {
      checkedValue.value = []
    }
    changeCurrent(1)
  },
  { deep: true, immediate: true }
)

// 选择
const onSelect = async (e) => {
  const itemData = tableData.value.find((item) => {
    return e[0] === item.id
  })
  const res = await linkSelect({
    rule: props.tabCurrentInfo.rule,
    isLogin: props.tabCurrentInfo?.isLogin ?? undefined,
    param: {
      id: itemData.id,
      title: itemData.title,
      subsidyType: itemData.subsidyType
    }
  })
  emit('handleCheck', res.data ?? '')
}
</script>

<style lang="scss" scoped></style>
